// 这里面写上传图片的是div直接包住img后台处理，不依赖嵌套表单的gem
function uploadIMG2(){
  // 手动写一个js回显(只对表单id为wenui_form的表单生效)
  $(document).on('change', '#wenui_form input[type=file]', function(){
  })
}
// 复写layui表单提交图片
function uploadIMGLI(obj){
  $(document).on('click', obj, function(){
    $(this).next('input[type=file]').click();
    var change_file = $(this).next('input[type=file]')
    change_file.bind("change", function() {
      //获取文件
      var file = $('input[type=file]')[0].files[0];
      //创建读取文件的对象
      var reader = new FileReader();
      var imgFile;
      reader.onload=function(e) {
        imgFile = e.target.result;
        $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', imgFile);
      };
      reader.readAsDataURL(file);
    })
    // $(document).on('change', `${change_file}`, function(){

    //   //$(this).parent().find('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data_url);
    // })
  })

}

function uploadIMGLI2(obj){
  $(document).on('click', obj, function(){
    $(this).next('input[type=file]').click();
    var change_file = $(this).next('input[type=file]')
    change_file.bind("change", function() {
      //获取文件
      var file = $(this)[0].files[0];
      //创建读取文件的对象
      var reader = new FileReader();
      var imgFile;
      reader.onload=function(e) {
        imgFile = e.target.result;
        $('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', imgFile);
      };
      reader.readAsDataURL(file);
    })
    // $(document).on('change', `${change_file}`, function(){

    //   //$(this).parent().find('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data_url);
    // })
  })

}

// 获取文件对象
function loadImg2(_this){
  let _parent = _this.parent()
  //获取文件
  var file = _this[0].files[0];
  //创建读取文件的对象
  var reader = new FileReader();
  //创建文件读取相关的变量
  var imgFile;
  //为文件读取成功设置事件
  reader.onload=function(e) {
    imgFile = e.target.result;
    console.log(imgFile)

    // if(is_img2(file.name)){
    //   _label.html('<img src='+imgFile+' class="label_upload_img">');
    // }else{
    //   _label.text(file.name)
    // }
  };
  //正式读取文件(实际这补才读取了对象)
  reader.readAsDataURL(file)
}

// 判断文件后缀
function is_img2(file_name){
  var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
  if (regex.test(file_name)) {
    return true
  } else {
    return false
  }
}

// 使用js获取全页面的input
// 获取整个文档能查到的所有元素遍历出input是file的(这个方法不行，这个是获取元素的并不是对象)
function getElementByAttr(tag, attr, value) {
  var aElements = document.getElementsByTagName(tag);
  var aEle = [];
  for (var i = 0; i < aElements.length; i++) {
    if (aElements[i].getAttribute(attr) == value) {
        aEle.push(aElements[i]);
    }
  }
  return aEle;
};
//插入图片
function parentNodeinit() {
  getElementByAttr("input", "type", "file").forEach(function(i) {
    console.log(i.getAttribute("data-file-url"))
    if (i.getAttribute("data-file-url")) {
      let img = document.createElement("img");
      img.src = i.getAttribute("data-file-url") || '/images/admin/addFile.png'
      // 这是找父节点插入图片，但是我要插入到label中
      i.parentNode.appendChild(img)
    }
    // 这是一种插入label中的方法
    // i.parentNode.getElementsByTagName("label")[0].appendChild(img)
  })
}


//横排上传表单，依赖嵌套表单的gem
function uploadIMG3() {
  // 手动写一个js回显(只对表单id为wenui_form的表单生效)
  $(document).on('change', '#wenui_form input[type=file]', function(){
    var _label = $(this).siblings("label")
    loadImg3($(this), _label)
    // 当图片的input改变了，就将图片的inopt(将删除显示出来)
    var _fields = $(this).parents(".fields")
    if (_fields){
     let _destroy = _fields.find(".nest_destroy")
     _destroy.val(false)
     _destroy.removeClass("stamp")
     let id = $(".add_nest_from").attr("data-target")
     if($(id).find(".stamp")[0] == undefined){
      $(".add_nest_from").click()
     }
     _label.parent().css('position', 'relative')
      //嵌套表单的时候添加一个i标签的删除图片
      dellabelI3(_label)
    }
  })
  addnested3()
  initImage3()
  delnested3()
}

// 添加删除标签
function dellabelI3(_label){
  let i = document.createElement("i");
  i.setAttribute("class", "layui-icon layui-icon-close-fill img_btn_fill")
  // 这是找父节点插入图片，但是我要插入到label中
  _label[0].parentNode.appendChild(i)
}

function addnested3(){
  // 当点击添加的时候应该走的js
  // 针对嵌套表单那个gem写了一个插入图片的样式配合这个js使用
  $(document).on('nested:fieldAdded', function(event){
    var field = event.field;
    var dateField = field.find('input[type=file]');
    if(dateField){
      var _label = dateField.siblings("label")
      dateField.hide()
      _label.text("")
      // 这个是插入img
      // _label.append(`<img src="/images/addFile.png" class='label_upload_img'>`)
      // 这个是插入背景图那个都可以
      _label.append(`<div class='upload_img_css_row'></div>`)
    }
    // 插入的表单默认应该是删除的也即是destroy=true
    var _destroy = field.find(".nest_destroy")
    // 添加一个标记
    _destroy.addClass("stamp")
    _destroy.val(true)
    // 给插入的input添加input样式
    // field.find("input").each(function(){
    //   $(this).addClass("layui-input")
    // })
    // 如果有select就重新调用一下select
    // var form = layui.form
    // form.render('select')
  })
}
// 这个是初始化，页面最初加载的时候走
function initImage3() {
  $("#wenui_form input[type=file]").each(function(){
    var _label = $(this).siblings("label")
    $(this).hide()
    _label.text("")
    _label.append(`<img src="${$(this).attr("data-file-url") || "/images/addFile.png"}" class='label_upload_img'>`)
    if(_label.parents(".fields")){
      _label.parent().css('position', 'relative')
      dellabelI3(_label)
    }
  })
  // 添加的图片被点击
  $(".add_nest_from").click()
}

// 获取文件对象
function loadImg3(_this, _label){
  //获取文件
  var file = _this[0].files[0];
  //创建读取文件的对象
  var reader = new FileReader();
  //创建文件读取相关的变量
  var imgFile;
  //为文件读取成功设置事件
  reader.onload=function(e) {
    imgFile = e.target.result;
    if(is_img3(file.name)){
      _label.html('<img src='+imgFile+' class="label_upload_img">');
    }else{
      _label.text(file.name)
    }
  };
  //正式读取文件(实际这补才读取了对象)
  reader.readAsDataURL(file)
}

// 判断文件后缀
function is_img3(file_name){
  var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
  if (regex.test(file_name)) {
    return true
  } else {
    return false
  }
}
// 横向的嵌套表单的删除js
function delnested3(){
  $(document).on('click', '.img_btn_fill', function(){
    let _fields = $(this).parents(".fields")
    let _destroy = _fields.find(".nest_destroy")
    _destroy.val(true)
    _fields.hide()
  })
}

// 一对一关系的上传图片(例如图片管理的那个表单)
//
// code
//


